<template>
  <div class="guide">
    <div class="title">
      智慧网联汽车大数据云控基础平台
    </div>
    <div class="system server">
      <span>服务中心</span>
    </div>
    <div class="system account">
      <span>统一账户</span>
    </div>
    <div class="system position">
      <span>定位播发</span>
    </div>
    <div class="system manager">
      <span>运营管理</span>
    </div>
    <div class="visual">
      <div class="inner" @click="skipTo()">
        <span>中心云数据可视化</span>
      </div>
    </div>
    <div class="footer">©2021  国汽大有时空科技（安庆）有限公司  版权所有</div>
  </div>
</template>

<script setup>
</script>
<style lang="less" scoped>
.guide {
  background-image: url(../../../src/assets/images/guide_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
}
.title {
  background-image: url(../../../src/assets/images/title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 21.6%;
  font-size: 2.25rem;
  font-weight: bold;
  padding-top: 0.5rem;
}
.system {
  background-repeat: no-repeat;
  background-position: center;
  width: 25.5vh;
  height: 25.5%;
  border-radius: 12.75vh;
  background-size: 140% 140%;
  box-shadow: 0 0 1.875rem 0.25rem rgba(0, 200, 255, 0.2);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2.1vw;
}
.server {
  background-image: url(../../../src/assets/images/server_center.png);
  position: absolute;
  top: 12.8%;
  right: 26.2%;
}

.account {
  background-image: url(../../../src/assets/images/account.png);
  position: absolute;
  top: 12.8%;
  left: 26.2%;
}

.position {
  background-image: url(../../../src/assets/images/position.png);
  position: absolute;
  top: 47.7%;
  left: 17.24%;
}

.manager {
  background-image: url(../../../src/assets/images/manager.png);
  position: absolute;
  top: 47.7%;
  right: 17.24%;
}
.footer {
  width: 100%;
  height: 4.6%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  bottom: 0;
}

.visual {
  position: absolute;
  bottom: 6.3%;
  left: calc((100% - 79.4vh) * 0.5);
  width: 79.4vh;
  height: 65.6%;
  background-image: url(../../assets/images/visual.png);
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.7vh;
}

.inner {
  width: 45vh;
  height: 45vh;
  border-radius: 22.5vh;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 7vh;
  font-size: 1.5rem;
}
</style>
